<template>
  <div class="aaa1">
    <!-- 上半图片 -->
    <div class="imgsb">
      <van-image
        width="200"
        height="130"
        src="https://img2.baidu.com/it/u=2053363257,2850220013&fm=253&fmt=auto&app=120&f=PNG?w=605&h=293"
      />
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
    </div>
    <!-- 表单内容 -->
    <div class="biaodanneirong">
      <!-- 文本框 -->
      <div class="wbkuang">
        <van-field
          v-model="value1"
          label="账号"
          left-icon="smile-o"
          clearable
          placeholder="请输入账号"
          style="width: 350px"
        />

        <van-field
          v-model="value2"
          clearable
          label="密码"
          left-icon="music-o"
          type="password"
          placeholder="请输入密码"
          style="width: 350px"
        />
      </div>
      <!-- 按钮 -->
      <div class="anniu">
        <van-button type="danger" @click="logclick">登录</van-button>
        <van-button plain hairline type="info" @click="registerclick"
          >新用户注册</van-button
        >
      </div>
    </div>
    <!-- 下半找回密码 -->
    <div>
      <span>找回密码</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      value1: "",
      value2: "",
    };
  },
  methods: {
    // 登录事件
    logclick() {
      axios
        .post(
          "http://localhost:8080/user/log",
          {
            zhanghao: this.value1,
            password: this.value2,
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
            },
          }
        )
        .then((res) => {
          // console.log(res.data.data);
          localStorage.setItem("userxx", res.data.data.uid);
          this.$store.state.userData = res.data.data;
          this.$router.push("/home");
        });
    },
    // 注册事件
    registerclick() {
      console.log(1);
      this.$router.push('/register').catch(r =>{})
    },
  },
};
</script>

<style scoped>
.aaa1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.imgsb {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  margin: 20px 0px 40px 0px;
}
.biaodanneirong {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wbkuang {
  display: flex;
  height: 160px;
  flex-direction: column;
  justify-content: space-evenly;
  width: 90%;
}
.anniu {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 140px;
  width: 80%;
}
</style>